<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }

        .son {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <!-- 定位: position :  static 静态定位   relative 相对定位  absolute 绝对定位   fixed 固定定位 -->
    <!-- 边偏移属性： top  bottom  left  right -->

    <!-- 相对定位  特点: 1.相对于自己当前位置移动  
                        2.原来的位置继续占有，后面的盒子以标准流对待他(不脱标，继续保留当前位置) -->
    <!-- 绝对定位  特点: 1.如果没有祖先元素或父元素，则以浏览器为准 
                        2.如果祖先元素有定位，则以最近的带有定位的祖先元素为参考点移动位置 
                        3.绝对定位不会占有原来的位置(脱标) -->
    
    <!-- 固定定位 fixed  特点: 1.以浏览器的可视窗口为移动元素
                               2.固定定位不占有原先的位置 -->

    <div class="father">
        <div class="son"></div>
    </div>
    <img src="images/img.jpg" alt="">
</body>

</html>